<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>路径轨迹回放</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- leaflet.js的基础依赖 -->
		<link rel="stylesheet" type="text/css" href="../leaflet/leaflet.css">
		<script type="text/javascript" src="../leaflet/leaflet.js"></script>
		<!-- 轨迹回放的自定义插件（依赖于leaflet。js） -->
		<script type="text/javascript" src="./markerTrack.js"></script>
		<script type="text/javascript" src="./em.geometryutil.js"></script>
    <script type="text/javascript" src="../leaflet/leaflet.ChineseTmsProviders.js"></script>
	</head>

	<style>
	    body {
	        margin: 0;
	        padding: 0;
	    }
	
	    #map {
	        position: absolute;
	        top: 0;
	        bottom: 0;
	        width: 100%;
	    }
	</style>

	<body>

		<div id='map'></div>


		<script type="text/javascript">
			 /**
       * 智图地图内容
       */
       var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
        maxZoom: 18,
        minZoom: 5,
      })
      var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
        maxZoom: 18,
        minZoom: 5,
      })
      /**
       * 天地图内容
       */
      var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        })

      var normal = L.layerGroup([normalm, normala]),
        image = L.layerGroup([imgm, imga])
      /**
       * 谷歌
       */
      var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        }),
        satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
      /**
       * 高德地图
       */
      var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5,
      })
      var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga])

      var baseLayers = {
        智图地图: normalm1,
        智图多彩: normalm2,
        智图午夜蓝: normalm3,
        智图灰色: normalm4,
        智图暖色: normalm5,
        智图冷色: normalm6,
        天地图: normal,
        天地图影像: image,
        谷歌地图: normalMap,
        谷歌影像: satelliteMap,
        高德地图: Gaode,
        高德影像: Gaodimage,
      }

      var latlng = L.latLng(30.48862182508258, 114.47839736938478)
			/* 这块代码是引入地图的,根据自己的项目来就好(我的项目里面是离线地图) */
			// --start引入地图--
			// var url = 'http://localhost:9090/img/{z}/{x}/{y}.png';
			// var url = '"http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8';
			var map = L.map('map',{
				center:latlng,
        maxZoom: 18,
				minZoom: 3,
				zoom: 6,
				zoomControl: false,
        layers: [Gaode],
			});
			//将图层加载到地图上，并设置最大的聚焦还有map样式
			// L.tileLayer(url, {
			// 	maxZoom: 18,
			// 	minZoom: 3
			// }).addTo(map);
			// // --end引入地图--
			
			/**
			 * 开始轨迹回放的代码
			 */
			// 运动的轨迹
			var polyline = L.polyline([[34.694,113.587],[38.694,113.587],[37.694,115.587]],{color: 'red'}).addTo(map);
			
			// 轨迹运动的图标
			var m = L.marker([34.694,113.587],{icon:L.icon({
			        iconUrl:'img/run.png',
			        iconAnchor: [25, 15],
			    })}).addTo(map);
			
			//添加一条线段也记录已经路过的点
			var passed=L.polyline([[]],{color:'yellow'}).addTo(map);
			m.on('update_position',function (e) {
			    //每次坐标更新。然后也更新路径
			    passed.setLatLngs(e.path);
			});
			
			
			// 开始运动
			m.moveAlong(polyline,300000);
			
		</script>
	</body>
</html>
